<template>
  <view>
    <view :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="page">
      <view class="list">
        <view v-for="(item, index) in LIST" :key="index" class="li">
          <view :data-color="item.color" :data-id="item.id" :data-url="item.url" class="a" @tap="makeFn">
            <image :src="item.url" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!globalUtils.empty(imagePath)" class="mask3 alpha0_100">
      <view class="ewmbox">
        <image :showMenuByLongpress="true" :src="imagePath" mode="widthFix"></image>
        <view class="ico close" @tap="closeFn"></view>
      </view>
      <view :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="btmbox div_upAnm1">
        <view class="a hh_wx" @tap.stop.prevent="sharepicFn">
          <text class="i ico"></text>
          <view class="span">转发给好友</view>
        </view>
        <view :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="br"></view>
        <view class="a hh_mob" @tap.stop.prevent="saveFn">
          <text class="i ico"></text>
          <view class="span">下载推广海报</view>
        </view>
        <view class="cancel" @tap="closeFn">返回</view>
      </view>
    </view>
    <canvas canvasId="mycanvas" style="width: 750px; height: 1200px; position: fixed; top: 9999px"></canvas>
  </view>
</template>
<script>
import globalUtils from "../../res/www.a9a.cn";

var a;
var t = require('../../res/www.a9a.cn.js');
var app = getApp();
export default {
  computed: {
    globalUtils() {
      return globalUtils
    }
  },
  data() {
    return {
      tguid: 0,
      admid: 0,
      color: '',
      rgbcolor: '',
      bg_url: '',
      photo_m_url: '',
      ewmurl: '',
      bg_path: '',
      bg_width: '',
      bg_height: '',
      ewm_path: '',
      photo_m_path: '',
      imagePath: '',
      LIST: []
    };
  },
  onLoad: function (e) {
    uni.showLoading({
      title: '玩命加载中...',
      mask: true
    });
    var i;
    var n;
    var that = this;
    if (t.ifint(e.tguid)) {
      i = e.tguid;
      n = t.ifint(e.admid) ? e.admid : 0;
    } else {
      for (var c = decodeURIComponent(e.scene), r = {}, g = 0; g < c.split('*').length; g++) {
        var d = c.split('*')[g].split('/');
        r[d[0]] = d[1];
      }
      i = t.ifint(r.t) ? r.t : 0;
      n = t.ifint(r.a) ? r.a : 0;
    }
    app.globalData.get_config('_ZEAI').then(function (e) {
      that.setData({
        color: e.color,
        rgbcolor: t.c16_rgb(e.color),
        tguid: i,
        admid: n
      });
      uni.setNavigationBarColor({
        backgroundColor: e.color,
        frontColor: '#ffffff'
      });
      uni.setBackgroundColor({
        backgroundColor: e.color,
        backgroundColorTop: e.color,
        backgroundColorBottom: e.color
      });
      a = uni.getStorageSync('COOK_U');
      app.globalData.ajax({
        url: 'tg.php',
        data: {
          submitok: 'TGHB',
          openid: a.openid,
          tguid: that.tguid,
          admid: that.admid
        },
        success: function (a) {
          console.log(a)
          '1' === a.flag
              ? (that.setData({
                bg_url: a.bg_url,
                photo_m_url: a.photo_m_url,
                ewmurl: a.ewmurl
              }),
                  uni.getImageInfo({
                    src: a.bg_url,
                    success: function (t) {
                      console.log('有什么报错', t)
                      that.setData({
                        bg_path: t.path,
                        bg_width: t.width,
                        bg_height: t.height
                      });
                      uni.getImageInfo({
                        src: a.ewmurl,
                        success: function (t) {
                          that.setData({
                            ewm_path: t.path
                          });
                          uni.getImageInfo({
                            src: a.photo_m_url,
                            success: function (a) {
                              that.setData({
                                photo_m_path: a.path
                              });
                              that.makeFn();
                            }
                          });
                        }
                      });
                    }
                  }))
              : uni.showModal({
                content: a.msg,
                confirmColor: that.color,
                confirmText: '朕知道了',
                showCancel: false,
                success: function (a) {
                  uni.navigateBack();
                }
              });
          uni.hideLoading();
        }
      });
    });
  },
  methods: {
    makeFn: function () {
      this.createNewImg(this.bg_url);
    },

    createNewImg: function () {
      uni.showLoading({
        title: '生成海报',
        mask: true
      });
      var that = this;
      var t = uni.createCanvasContext('mycanvas', that);
      t.restore();
      t.drawImage(that.bg_path, 0, 0, that.bg_width, that.bg_height);
      var o = 136;
      var e = 136;
      var i = (that.bg_width - 136) / 2;
      var n = 318;
      t.save();
      t.beginPath();
      t.arc(o / 2 + i, e / 2 + n, o / 2, 0, 2 * Math.PI, false);
      t.clip();
      t.drawImage(that.photo_m_path, i, n, o, e);
      t.restore();
      o = 210;
      e = 210;
      i = (that.bg_width - 210) / 2;
      n = 810;
      t.save();
      t.beginPath();
      t.arc(o / 2 + i, e / 2 + n, o, 0, 360, false);
      t.clip();
      t.drawImage(that.ewm_path, i, n, o, e);
      setTimeout(function () {
        t.draw(false, function () {
          uni.canvasToTempFilePath(
              {
                canvasId: 'mycanvas',
                fileType: 'png',
                success: function (t) {
                  uni.hideLoading();
                  var o = t.tempFilePath;
                  that.setData({
                    imagePath: o
                  });
                },
                fail: function (a) {
                }
              },
              that
          );
        });
      }, 300);
    },

    saveFn: function () {
      uni.saveImageToPhotosAlbum({
        filePath: this.imagePath,
        success: function (a) {
          uni.showToast({
            title: '保存成功',
            icon: 'success',
            mask: true
          });
        }
      });
    },

    closeFn: function () {
      this.setData({
        imagePath: ''
      });
      uni.navigateBack();
    },

    sharepicFn: function () {
      uni.showShareImageMenu({
        path: this.imagePath
      });
    }
  }
};
</script>
<style>
@import './my_ewm.css';
</style>
